<template>
	<view >
		<view class="box">
			<view class="box_img">
				<image :src="list.recharcard.recharcard_img" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="box_wap">
				<view class="box_wap_img">
					<image :src="list.recharcard.recharcard_img" style="width: 100%;height: 100%;" mode=""></image>
				</view>
				<view class="box_wap_te">
					<view style="height: 60rpx;line-height: 60rpx;margin-left: 7px;">
						{{list.recharcard_title}}
					</view>
					<view style="height: 60rpx;line-height: 60rpx;">
						￥{{list.recharcard_money}}
					</view>
				</view>
			</view>
		</view>
		<view class="buy">
			<view class="detail_content">
				<span>面值金额：</span>
				<text>￥{{list.recharcard_money}}</text>
			</view>
			<view class="detail_content" >
				<span >面值金额：</span>
				<text >￥{{list.recharcard_money}}</text>
			</view>
			<view class="detail_content" >
				<span >有效日期：</span>
				<text >
					{{list.start_use_time}}
					至 {{list.end_use_time}}
				</text>
			</view>

			<view class="detail_content">
				<span >使用须知：</span><br>
				<view style="white-space: pre-wrap; color:#bcbcbc; line-height: 50rpx;">
					{{list.recharcard.rule.content}}
				</view>
			</view>
		</view>
    <view style="height: 35px;"></view>
		<button type="primary" class="go" @click="go">去使用</button>

    <home v-if="navigation"></home>
    <!-- #ifdef MP -->
    <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
    <!-- #endif -->
	</view>
</template>

<script>
	import {recharcard_userRead} from '@/api/store.js'
  import home from '@/components/home';
  import {
    mapGetters
  } from "vuex";
  import {
    toLogin
  } from '@/libs/login.js';
	export default {
    components: {
      home
    },
		data() {
			return {
        isShowAuth: false, //是否隐藏授权
				id:0,
				list:{}
			}
		},
    computed: mapGetters(['isLogin']),
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          if (newV) {
            // #ifdef H5 || APP-PLUS
            this.onNaver();
            // #endif
          }
        },
        deep: true
      }
    },
		onLoad(option){
      if (!this.isLogin) {
        // #ifdef H5 || APP-PLUS
        toLogin()
        // #endif
        // #ifdef MP
        this.isShowAuth = true;
        // #endif
      }
			if(option.id){
				this.id = option.id
        console.log('option.id== ',option.id)
				this.onNaver()
			}
		},
		onShow(){

		},
		methods: {
      onLoadFun(){
        this.isShowAuth = false;
      },
      // 授权关闭
      authColse: function(e) {
        this.isShowAuth = e;
      },
      /*
        提货券列表
       */
			onNaver(){
				//获取详情
				recharcard_userRead(this.id).then(res=>{
					this.list = res.data.info
          if (this.list.start_use_time == null || this.list.start_use_time == 0){
            this.list.start_use_time = '2020/01/01' ;
            this.list.end_use_time = '2024/09/30';
          }else if(this.list.start_use_time != null && (this.list.end_use_time == null ||  this.list.end_use_time == 0 ||this.list.end_use_time == 'NaN') ) {
            this.list.end_use_time =  this.getNowTime(this.list.start_use_time * 1000 + 63072000000 )
            this.list.start_use_time = this.getNowTime(this.list.start_use_time * 1000)
          }else{
            this.list.start_use_time =  this.getNowTime((this.list.start_use_time * 1000) )
            this.list.end_use_time = this.getNowTime(this.list.end_use_time * 1000)
          }
				})
			},
			//补零
			fillZero (str) {
				var realNum;
				if (str < 10) {
				  realNum = '0' + str;
				} else {
				  realNum = str;
				}
				return realNum;
			},
			getNowTime(time) {
				let now = new Date(time);
				let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
				let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let today = now.getDate(); //获取当前日(1-31)
				let hour = now.getHours(); //获取当前小时数(0-23)
				let minute = now.getMinutes(); //获取当前分钟数(0-59)
				let second = now.getSeconds(); //获取当前秒数(0-59)
				let nowTime = ''
				nowTime = year + '/' + this.fillZero(month) + '/' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' +
				  this.fillZero(minute) + ':' + this.fillZero(second)
				return nowTime
			},
			// 点击去使用
			go(){
				if(this.list.recharcard.recharcard_type == '品类券'){
					uni.reLaunch({
						url:'/pages/goods_list/index?sid=' + this.list.recharcard.category_id
					})
				}else if(this.list.recharcard.recharcard_type == '商品券'){
					var arr = []
					arr.push(this.list)
					uni.reLaunch({
						url:'/pages/users/order_confirm/index?cartId=' + this.list.card + '&reId=' + this.list.id +'&recharcardTxt='+ this.list.recharcard_title + '&recharcard=' + JSON.stringify(arr)
					})
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 20rpx;
		box-sizing: border-box;
		.go{
			position: fixed;
			bottom: 0;
			width: calc(100% - 40rpx);
			height: 80rpx;
			line-height: 80rpx;
			// left: -20rpx;

		}
		.box {
			width: 100%;
			height: 620rpx;
			background-color: #fff;
			padding-top: 20rpx;
			box-sizing: border-box;
			.box_img {
				width: 670rpx;
				height: 360rpx;
				margin: 0 auto;
			}
			.box_wap {
				width: 670rpx;
				height: 180rpx;
				background-color: #fff;
				margin: 40rpx auto 0;
				padding-top: 40rpx;
				box-sizing: border-box;
				display: flex;
				border-top: 1px solid #ccc;
				.box_wap_img {
					width: 120rpx;
					height: 120rpx;
					// background-color: pink;
					margin-left: 50rpx;
					margin-right: 10rpx;
				}
				.box_wap_te {

				}
			}
		}
		.buy {
			width: 100%;
			height: 600rpx;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			.detail_content {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				margin: 30rpx 0;
				align-items: center;
				span{
					color:#000;
					font-size:34rpx;
				}
				text{
					color:#bcbcbc
				}
			}
		}
	}
</style>
